<template>
  <el-input
    v-model="inputValue"
    :placeholder="$t(placeholder)"
    :clearable="clearable"
    style="width: 200px;"
    class="filter-item"
    @input.native="updateValue"
    @keyup.enter.native="enter"
    @clear="clear"
  />
</template>

<script>
export default {
  name: 'Input',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(val) {
      this.inputValue = val
    }
  },
  methods: {
    updateValue(event) {
      this.$emit('input', event.target.value)
    },
    enter() {
      this.$emit('enter')
    },
    clear() {
      this.$emit('input', undefined)
      this.$emit('enter')
    }
  }
}
</script>

<style scoped>

</style>
